@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

.post-page {
	min-height: 100vh;
	background: $bg-page;
	
	.post-header {
		background: $bg-card;
		padding: $spacing-base $spacing-lg;
		border-bottom: 1px solid $border-light;
		box-shadow: $shadow-sm;

		.post-search {
			display: flex;
			align-items: center;
			gap: $spacing-sm;
		}
	}

	// 帖子列表容器
	.post-content {
		flex: 1;
		overflow: hidden;

		.scroll-container {
			height: calc(100vh - 240rpx);
			padding: $spacing-base;
		}

		.posts-container {
			display: flex;
			flex-direction: column;
			gap: $spacing-base;
		}

		// 骨架屏
		.skeleton-container {
			.skeleton-item {
				@include card;
				padding: $spacing-lg;
				margin-bottom: $spacing-base;

				.skeleton-content {
					.skeleton-title {
						height: 40rpx;
						background: $border-light;
						border-radius: $radius-sm;
						margin-bottom: $spacing-base;
						width: 80%;
					}

					.skeleton-meta {
						display: flex;
						gap: $spacing-base;

						.skeleton-text {
							height: 28rpx;
							background: $border-light;
							border-radius: $radius-sm;
							flex: 1;
						}
					}
				}

				.skeleton-animate {
					@include skeleton-animation;
				}
			}
		}

		// 加载更多
		.load-more,
		.no-more {
			@include flex-center;
			padding: $spacing-xl 0;

			.load-more-text,
			.no-more-text {
				font-size: $font-sm;
				color: $text-tertiary;
			}
		}

		// 空状态
		.empty-state {
			@include flex-center;
			flex-direction: column;
			padding: 200rpx 0;
			gap: $spacing-md;
			@include fade-in;

			.empty-text {
				font-size: $font-base;
				color: $text-secondary;
				font-weight: $font-medium;
			}

			.empty-hint {
				font-size: $font-sm;
				color: $text-tertiary;
			}
		}
	}
}
